<template>
    <view>
        <scroll-view scroll-y="true" class="table-view-list">
            <up-cell v-for="(item, index) in list" :key="index" :title="item.title" :isLink="true"
                arrow-direction="arrow-right" @click="getInfo(item.data)">
                <template #right-icon>
                    <view class="right-box">
                        <up-icon name="arrow-right"></up-icon>
                    </view>
                </template>
            </up-cell>
        </scroll-view>
        <up-popup :show="showPop" :customStyle="{ maxWidth: '350px' }" mode="right" :closeable="true" @close="closePop">
            <view class="title-pop">
                详情
            </view>
            <scroll-view scroll-y="true" class="scroll-view-box">
                <up-form labelWidth="83" labelAlign="left">
                    <up-form-item :label="item.label" v-for="(item, index) in itemInfo" :key="index">
                        <view class="border-box" v-if="item.type != '03'">
                            {{ item.value }}
                        </view>
                        <view class="link-btn" v-else @click="openTableAcc(item.value)">
                            查看附件
                        </view>
                    </up-form-item>
                </up-form>
            </scroll-view>
        </up-popup>
        <up-modal :show="tableAccShow" title="查看附件" @confirm="tableAccShow = false">
            <scroll-view scroll-y="true" class="scroll-view-affix slot-content">
                <up-form labelWidth="100%" labelPosition="top" labelAlign="center">
                    <up-form-item :key="index" v-for="(item, index) in tableAccList">
                        <view class="border-box item" @click="goToPage(item.value)">{{ item.label }}</view>
                    </up-form-item>
                </up-form>
            </scroll-view>
        </up-modal>
    </view>
</template>
<script setup>
import {
    ref,
    reactive,
    watch,
    toRefs,
} from "vue"
import { useRouter } from '@/uni-simple-router';
const router = useRouter();
let props = defineProps({
    list: {
        type: Array,
        default: () => ([])
    }
})
let { list } = toRefs(props);
const showPop = ref(false);


let tableAccShow = ref(false);
let tableAccList = ref([]);
let openTableAcc = (list) => {
    tableAccShow.value = true;
    
    tableAccList.value = list
    console.log('tableAccList',tableAccList.value);
}

let itemInfo = ref([])

let goToPage = (t) => {
    // uni.setStorageSync('url',t);
	// router.push({ path: "/preview"});
    uni.downloadFile({
        url: t,
        success: (res) => {
            if (res.statusCode === 200) {
				uni.saveFile({
					tempFilePath: res.tempFilePath,
					success: (saveRes) => {
						console.log('文件保存成功，保存路径为：', saveRes.savedFilePath);
					},
					fail: (saveErr) => {
						console.log('文件保存失败：', saveErr);
					}
				});
			}
        },
        fail: (err) => {
            console.log('文件下载失败：', err);
        }
    });
}
function closePop() {
    // 关闭逻辑，设置 show 为 false  
    showPop.value = false;
    // console.log('close');  
}

let getInfo = (list) => {
    itemInfo.value = list;
    showPop.value = true;
}
</script>
<style scoped lang="scss">
.scroll-view-box {
    // margin-top: 40px;
    // height: 500px;
    padding: 0 20px;
    width: 100%;
    box-sizing: border-box;
    height: calc(100vh - 55px);
}

.scroll-view-list {
    flex: 1;
    height: calc(100% - 147px);
    box-sizing: border-box;
    width: calc(100% - 20px);
    margin: 10px auto 0;
    background: #fff;
    padding: 10px 10px;
    box-sizing: border-box;
    border-radius: 15px;
}

.right-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.inx-top-box {
    flex: 1;
    background-color: #fff;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
    margin: 0 auto;
}

.title-pop {
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-weight: 600;
}

.table-view-list {
    max-height: 400px;
}

.link-btn {
    color: $uni-color-primary;
    text-decoration: underline;
    cursor: pointer;
}

.border-box {
	width: 100%;
	padding: 6px 0 6px;
	border-bottom-width: 0.5px !important;
	border-color: #dadbde !important;
	border-bottom-style: solid;
	font-size: 15px;
	min-height: 32px;
	box-sizing: border-box;
}

.slot-content {
	width: 100%;
	.item {
		text-align: center;
		margin-top: 3px;
		padding: 5px;
		color: $uni-color-primary;
		text-decoration: underline;
		cursor: pointer;
	}
}
</style>